<template>
    <div class="scrollbox">
        <!-- 头部 -->
        <v-header></v-header>
        <div class="dis10"></div>
        <div class="listbox aps9">
            <v-sedlist
                    api="cluster.list"
                    ref="list"
                    cards="1"
                    :params="params"
                    :hidSearch="'true'"
            >
                <template slot="search">&nbsp;&nbsp;
                    <el-button
                            v-if="userinfo.role !='view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            @click="edit(params)"
                    >添加
                    </el-button>&nbsp;
                    <el-button
                            v-if="userinfo.role !='view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-sort"
                            @click="generate()"
                            style="float: right"
                    >生成缓存
                    </el-button>&nbsp;
                </template>
                <template slot="head" slot-scope="props">
                    <thead>
                    <tr class="tr">
                        <th>集群</th>
                        <th>节点</th>
                        <th>地址</th>
                        <th>备注</th>
                        <th>状态</th>
                        <th v-if="userinfo.role !='view'">操作</th>
                    </tr>
                    </thead>
                </template>
                <template slot="item" slot-scope="props">
                    <tr v-for="(sitem,sindex) in props.item.region.nodes">
                        <td :rowspan="props.item.region.nodes.length" v-if="sindex === 0 " class="font-blue"
                            style="background-color: white!important;border-right:1px solid #efefef">
                            <span class="clu_bih" style="max-width: 150px;word-break:break-all">
                                <span class="font-blue f14" @click="edit(props.item.region)">
                                    {{ props.item.region.label }}
                                    <span class="font-gray f12">({{ props.item.region.cluster_name }})</span>
                                </span>
                                <i class="el-icon-close to_close_clu" @click="del(props.item)"></i>
                                <br>
                                <div class="font-gray2"
                                     style="display: inline-block; max-width: 130px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"
                                     :title="props.item.region.bz">
                                    [{{ props.item.region.bz }}]
                                </div>
                            </span>
                        </td>
                        <td :colspan="sitem.node_name?'1':'5'" class="font-gray2">
                            <span v-if="!sitem.node_name">
                                <el-button
                                        size="mini"
                                        icon="el-icon-plus"
                                        @click="toEditNodes(sitem,props.item.region)"
                                        circle
                                        style="margin-left: 41%;width: 100px"
                                ></el-button>
                            </span>
                            <span class="toShow" v-if="sitem.node_name">
                                <span class="font-blue f14">{{sitem.label}}</span>
                                <span class="font-gray">
                                    ({{sitem.node_name}})
                                    <span title="数量">[{{sitem.target_count}}] </span>
                                </span>
                                <span v-if="sitem.is_master" class="font-red" title="主节点">主</span>
                            </span>
                        </td>
                        <td v-if="sitem.node_name" class="font-gray2">
                            {{sitem.url}}<br>{{sitem.uuid}}
                        </td>
                        <td v-if="sitem.node_name" class="font-gray2">
                            <span style="display: inline-block;max-width: 200px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"
                                  :title="sitem.bz"> {{sitem.bz}}</span>
                        </td>
                        <td v-if="sitem.node_name" class="font-gray2">
                            <span v-if="sitem.status === 1" style="padding-left: 5px" title="开启">
                                <i class="el-icon-success" style="color: #009f3d"></i>
                            </span>
                            <span v-if="sitem.status === 0" style="padding-left: 5px" title="关闭">
                                <i class="el-icon-error" style="color: #f56c6c"></i>
                            </span>
                        </td>
                        <td class="font-gray2" v-if="userinfo.role !='view' && sitem.node_name"
                            style="width: 110px">
                            <el-button
                                    size="mini"
                                    title="编辑"
                                    icon="el-icon-edit"
                                    type="primary"
                                    circle
                                    @click="toEditNodes(sitem,props.item.region)"
                            ></el-button>
                            <el-button
                                    size="mini"
                                    title="删除"
                                    icon="el-icon-delete"
                                    type="danger"
                                    circle
                                    @click="delnodes(sitem)"
                            ></el-button>
                        </td>
                    </tr>
                </template>
            </v-sedlist>
        </div>

        <!-- 编辑集群 -->
        <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
            <div class="dialogform">
                <el-form
                        :model="form"
                        :rules="rules"
                        ref="form"
                        label-width="120px"
                        label-position="right"
                        class="demo-ruleForm"
                >
                    <el-form-item label="标签" prop="label">
                        <el-input
                                v-model="form.label">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="cluster_name">
                        <el-input
                                :disabled="editData.id == 0?false:true"
                                v-model="form.cluster_name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" :rows="3" v-model="form.bz"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="uid">-->
                    <!--<el-input v-model="form.uid"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label prop="inlock">
                        <el-button type="primary" @click="save">保 存</el-button>
                        <el-button @click="editData.status = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="tc"></div>
        </el-dialog>
        <!-- 编辑集群结束 -->
        <!-- 编辑节点 -->
        <el-dialog :title="editNodes.title" :visible.sync="editNodes.status" width="680px" top="7vh">
            <div class="dialogform">
                <el-form
                        :model="nodesForm"
                        :rules="nodesRules"
                        ref="nodesForm"
                        label-width="120px"
                        label-position="right"
                        class="demo-ruleForm"
                >
                    <el-form-item label="集群">
                        <span class="font-gray">{{cluster_label}}({{nodesForm.cluster_name}})</span>
                    </el-form-item>
                    <el-form-item label="标签" prop="label">
                        <el-input
                                v-model="nodesForm.label">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="node_name">
                        <el-input
                                :disabled="editNodes.id == 0?false:true"
                                v-model="nodesForm.node_name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="url">
                        <el-input
                                style="width: 385px"
                                v-model="nodesForm.url">
                        </el-input>
                        <el-button @click="getUuid(nodesForm.url)">检测</el-button>
                        <br>
                        <span v-if="uuid" class="font-gray2">({{uuid}})</span>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" :rows="4" v-model="nodesForm.bz"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio v-model="nodesForm.status" :label="1">开启</el-radio>
                        <el-radio v-model="nodesForm.status" :label="0">关闭</el-radio>
                    </el-form-item>
                    <el-form-item label prop="inlock">
                        <el-button type="primary" @click="saveNodes">保 存</el-button>
                        <el-button @click="editNodes.status = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="tc"></div>
        </el-dialog>
        <!-- 编辑节点结束 -->
    </div>
</template>
<script>
  import {cacheUserinfo} from "@cache";

  export default {
    data () {
      return {
        form: {
          id: 0,
          bz: '',
          cluster_name: '',
          label: ''
        },
        editData: {
          status: false,
          title: "",
          id: 0
        },
        cluster_label: '',
        nodesForm: {
          id: 0,
          bz: '',
          cluster_name: '',
          node_name: '',
          label: '',
          url: '',
          // target_count:'',
          status: 1,
        },
        toShowMaster: false,
        uuid: '',
        editNodes: {
          status: false,
          title: "",
          id: 0
        },
        rules: {
          cluster_name: [
            {
              type: "string",
              required: true,
              message: "请输入集群标签",
              trigger: "blur"
            },
            { min: 1, message: "集群标签不能为空", trigger: "blur" }
          ],
          label: [
            {
              type: "string",
              required: true,
              message: "请输入集群名称",
              trigger: "blur"
            },
            { min: 1, message: "集群名称不能为空", trigger: "blur" }
          ]
        },
        nodesRules: {
          node_name: [
            {
              type: "string",
              required: true,
              message: "请输入节点名称",
              trigger: "blur"
            },
            { min: 1, message: "节点名称不能为空", trigger: "blur" }
          ],
          label: [
            {
              type: "string",
              required: true,
              message: "请输入节点标签",
              trigger: "blur"
            },
            { min: 1, message: "节点标签不能为空", trigger: "blur" }
          ],
          url: [
            {
              type: "string",
              required: true,
              message: "请输入地址",
              trigger: "blur"
            },
            { min: 1, message: "地址不能为空", trigger: "blur" }
          ]
        },
        params: {},
        // menu: [],
        loading: false,
        userinfo: {}
      };
    },
    methods: {
      // 添加编辑节点
      toEditNodes (item, seitem) {
        if (JSON.stringify(item) === '{}') {
          this.editNodes.title = '添加节点'
        } else {
          this.editNodes.title = '修改节点'
        }
        this.editNodes.status = true;
        this.editNodes.id = item.id || 0;
        this.nodesForm.id = item.id || 0;
        this.nodesForm.cluster_name = seitem.cluster_name || "";
        this.cluster_label = seitem.label || "";
        this.nodesForm.label = item.label || "";
        this.nodesForm.node_name = item.node_name || "";
        this.nodesForm.url = item.url || "";
        this.nodesForm.bz = item.bz || "";
        // this.nodesForm.target_count = item.target_count || "";
        this.nodesForm.status = item.status === 0 ? 0 : 1
        this.uuid = ''
      },
      // 保存节点
      saveNodes () {
        let that = this;
        that.$refs["nodesForm"].validate(valid => {
          if (valid) {
            let url = 'cluster.node_save';
            that.$api.jpost(url, that.nodesForm).then(res => {
              if (res.status === 1) {
                this.$success(res.msg);
                that.editNodes.status = false;
                that.$refs.list.fetchData();
              } else {
                that.$error(res.msg);
              }
            }).catch(() => {});
          }
        });
      },
      // 添加编辑集群
      edit (item) {
        if (JSON.stringify(item) === '{}') {
          this.editData.title = '添加集群'
        } else {
          this.editData.title = '修改集群'
        }
        this.editData.status = true;
        this.editData.id = item.id || 0;
        this.form.id = item.id || 0;
        this.form.cluster_name = item.cluster_name || "";
        this.form.bz = item.bz || "";
        this.form.label = item.label || "";
      },
      // 保存集群
      save () {
        // console.log(this.form)
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            let url = 'cluster.save';
            that.$api.jpost(url, that.form).then(res => {
              if (res.status === 1) {
                this.$success(res.msg);
                that.$refs.list.fetchData();
                that.editData.status = false;
              } else {
                that.$error(res.msg);
              }
            }).catch(() => {});
          }
        });
      },
      // 获取uuid
      getUuid (item) {
        let p = item
        this.$api.get("cluster.get_node_uuid", { url: p }).then(res => {
          if (res.status === 1) {
            this.uuid = res.data
            if (res.data) {
              this.uuid = res.data
              this.$success(res.msg);
            } else {
              this.uuid = '请输入正确的地址'
              this.$error(res.msg);
            }

          }
        }).catch(() => {});
      },
      // 删除节点
      delnodes (item) {
        // console.log(item)
        let arr = []
        arr.push(item.node_name)
        let that = this;
        that.$confirm("此操作会将该节点彻底删除，不可恢复, 是否继续?", "删除提醒")
            .then(() => {
              that.$api
                  .jpost("cluster.node_remove", arr)
                  .then(res => {
                    if (res.status === 1) {
                      that.$success(res.msg);
                      that.$refs.list.fetchData();
                    } else {
                      that.$error(res.msg);
                    }
                  }).catch(() => {});
            })
            .catch(() => {
            });
      },
      // 删除集群
      del (row) {
        let arr = []
        arr.push(row.region.cluster_name)
        let that = this;
        that.$confirm("此操作会将该集群彻底删除，不可恢复, 是否继续?", "删除提醒")
            .then(() => {
              that.$api
                  .jpost("cluster.remove", arr)
                  .then(res => {
                    if (res.status === 1) {
                      that.$success(res.msg);
                      that.$refs.list.fetchData();
                    } else {
                      that.$error(res.msg);
                    }
                  }).catch(() => {});
            })
            .catch(() => {
            });
      },

      // 生成配置
      generate () {
        let that = this
        this.$api.get("cluster.node_refresh").then(res => {
          if (res.status === 1) {
            that.$success(res.msg);
            that.$refs.list.fetchData();
          } else {
            that.$error(res.msg);
          }
        }).catch(() => {});
      }
    },
    mounted () {
      this.userinfo = cacheUserinfo.load()
    }
  };
</script>

<style lang="scss" scoped>
    .tabs {
        width: 290px;
    }

    .clu_bih {
        cursor: pointer;
    }

    .clu_bih:hover .to_close_clu {
        visibility: visible;
    }

    .to_close_clu {
        color: red;
        display: inline-block;
        visibility: hidden
    }

    .toMaster {
        width: 20px;
        display: inline-block;
        visibility: hidden;
        color: red;
    }

    .toShow:hover .toMaster {
        visibility: visible;
    }

</style>
